<template>
  <view>
    <up-navbar title="找工作" :autoBack="false" bgColor="#fd7753" :titleStyle="{color: '#fff'}">
      <template #left>
        <view></view>
      </template>
    </up-navbar>
    <view class="pt-90">
      <!-- 搜索-->
      <view class="p-20">
        <up-input placeholder="前端开发工程师" class="search-input">
          <template #prefix>
            <view class="flex f-s-m flex-center">
              <up-icon name="map" color="#ff7100" class="mr-10"/>
              <view class="fw-600">{{ state.address }}</view>
              <up-icon name="arrow-down" color="#9d9d9d" class="ml-10" size="12"/>
            </view>
          </template>
          <template #suffix>
            <up-icon name="search" color="#9d9d9d" class="mr-10" size="25"/>
          </template>
        </up-input>
      </view>

      <!-- 筛选-->
      <view>
        <up-sticky bg-color="#fff" :offset-top="91">
          <view class="flex-between p-20">
            <up-select v-model:current="cateId" label="区域"
                       :options="cateList" @select="selectItem"></up-select>
            <up-select v-model:current="cateId" label="行业"
                       :options="cateList" @select="selectItem"></up-select>
            <up-select v-model:current="cateId" label="薪资"
                       :options="cateList" @select="selectItem"></up-select>
            <up-select v-model:current="cateId" label="其他"
                       :options="cateList" @select="selectItem"></up-select>
          </view>
        </up-sticky>
        <view>
          <view v-for="item of workCardDataMock" :key="item.company">
            <work-card :data="item" :type="1"/>
          </view>
          <at-empty v-if="workCardDataMock.length === 0" :desc="'暂无数据'" type="empty"/>
        </view>
      </view>

    </view>
  </view>
  <at-tabbar/>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import WorkCard from "@/work/components/work-card.vue";
import {workCardDataMock} from "@/utils/mock";

const state = reactive({
  address: '上海市'
})
</script>


<style scoped lang="scss">
.search-input {
  background: #fff;
  border-radius: 10rpx;
}

</style>
